import React, { useState, useRef, useEffect } from "react";
import { Form, Input, Button, Card, message } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";

import { useNavigate } from "react-router-dom";

function LoginPage({ onLogin }) {
  const [form] = Form.useForm(); // 获取表单实例
  const navigate = useNavigate();

  const inputRef = useRef(null);

  const handleLogin = () => {
    // 模拟登录成功
    // onLogin({ name: "John Doe", email: "john@example.com" });
     navigate("/p/meihua/widgetview/a");

    form.resetFields(); // 这会清空所有表单字段
    inputRef.current?.focus(); // 重新聚焦
  };

  return (
    <div className="login-container">
      <Card title="刷卡登录" className="login-card">
        <Form form={form} name="normal_login" className="login-form">
          <Form.Item
            name="username"
            rules={[{ required: true, message: "请输入卡ID!" }]}
          >
            <Input
              ref={inputRef}
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder="用户卡ID"
              autoFocus
            />
          </Form.Item>

          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              onClick={handleLogin}
              className="login-form-button"
            >
              登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
}

function DataPage({ user }) {
  return (
    <div>
      <h1>欢迎, {user.name}</h1>
      <p>您的邮箱: {user.email}</p>
      {/* 其他数据内容 */}
    </div>
  );
}

function App() {
  const [user, setUser] = useState(null);

  if (!user) {
    return <LoginPage onLogin={setUser} />;
  }

  return <DataPage user={user} />;
}

export default App;
